<template>
    <div class="menu-button" @click="clickFun('0')">
        <i class="fl icon" :style="{'background-position':imgPosition}"></i>
        <span class="fl content" v-text="content"></span>
    </div>
</template>

<script>
  export default {
    name: "MenuButton",
    data() {
      return {
        showIcon: false
      }
    },
    props: {
      clickFun:{
        type:Function,
        default:function () {

        }
      },
      imgPosition: {
        type: String,
        default: function () {
          return ''
        }
      },
      content: {
        type: String,
        default: function () {
          return ''
        }
      }
    },
    mounted() {
      if (!this.imgPosition || this.imgPosition === '') {
        this.showIcon = false
      } else {
        this.showIcon = true
      }
    }
  }
</script>

<style scoped>
    .menu-button{
        height: 40px;
    }
    .icon {
        background-image: url("/icon/menu_icon2.png");
        background-repeat: no-repeat;
        background-size: 18px;
        height: 20px;
        width: 18px;
        margin-top: 12px;
    }

    .content {
        font-size: 14px;
        margin-left: 15px;
        color: #323232;
    }
</style>
